import React, { useState } from 'react'
import "./App.css"

import { nanoid } from 'nanoid'

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'

export default function App() {
  //因为本来是向后端拿去数据，这里先初始一个值
  const [todoList,setTodoList] = useState([
    {id:nanoid(),todo:'吃饭',done:false},
    {id:nanoid(),todo:'睡觉',done:false},
    {id:nanoid(),todo:'打豆豆',done:false},
    {id:nanoid(),todo:'看电视',done:false}
  ])

  //封装一个传输数据的函数
   function UpTodoList(data){
    const newData = {id:nanoid(),todo:data,done:false}
    setTodoList([newData,...todoList])
   }

  return (
    <div className="todo-container">
    <div className="todo-wrap">
      <Header UpTodoList={UpTodoList}/>
      <List todoList={todoList}  setTodoList={setTodoList}/>
      <Footer todoList={todoList}  setTodoList={setTodoList}/>
    </div>
  </div>
  )
}
